<template>
    <div>
        <!-- 卡片视图区域 -->
    <el-card>
      <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="bar" style="width: 750px;height:400px;margin-left:350px;"></div>
      <div id="pie" style="width: 750px;height:400px;margin-left:350px;"></div>
    </el-card>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    import {getbar,getPie} from '@/api/echarts'
    export default {
         name:'report',
         mounted(){
             this.getbar()
             this.getPie()
         },
         methods:{
             getbar(){
                 getbar().then((res)=>{
                      // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('bar'));
                // 绘制图表
                myChart.setOption({
                     title: {
                        text: '用户注册设备统计'
                    },
                    tooltip: {},
                    legend: {
                        data:['设备数目']
                    },
                    xAxis: {
                        data: res.data.name
                    },
                    yAxis: {},
                    series: [{
                        name: '设备数目',
                        type: 'bar',
                        data: res.data.count
                    }]
                });
                 })
             },
             getPie(){
                getPie().then((res)=>{
                    // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('pie'));
                // 指定图表的配置项和数据
                myChart.setOption({
                    title: {
                        text: '设备数目',
                        subtext: '纯属虚构',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: res.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })


                })
             }
             
         }
    }
</script>

<style lang="scss" scoped>

</style>